<template>
    <div id='temp'>
        <div class="row" v-for="(item,index) in list" :key="index">
            <mt-switch class="swithbtn" v-model="value[index]"></mt-switch>
             <img :src="item.thumb_path"> 
            <div class='btn'>
                <h4>{{item.title}}</h4>
                <ul>
                    <li>￥{{item.sell_price}}</li>
                    <li><carinput :initcount="item.cou" :goodsid="item.id" @senddata='getobj'></carinput></li>
                    <li><a href="javascript:;" @click='delData(index,item.id)'>删除</a></li>
                </ul>
            </div>
        </div>
        <div class='total'>
            <div class="desc">
                <ul>
                    <li>总计（不含运费）</li>
                    <li>已勾选商品{{totalcount}}件，总价：￥{{totalAmount}}元</li>
                </ul>
            </div>
            <div class="btn">
                <mt-button type='danger' size="small">去结算</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
    import { Toast } from 'mint-ui';
    import carinput from "../subcom/carinputnumber.vue";
    import common from "../../kits/common.js";
    import {getGoodsObj,updateObj,delItem} from "../../kits/localstorage.js";
    export default{
        components:{
            carinput,
        },
        data () {  
                return {
                    value:[],
                    list:[
                   // {
                    // "cou": 1,
                    // "id": 87,
                    // "title": "华为（HUAWEI）荣耀6Plus 16G双4G版",
                    // "sell_price": 2195,
                    // "thumb_path": "/upload/201504/20/thumb_201504200046589514.jpg"
                    // }
                    ],
                    totalAmount:0
                };
            },
      created(){
          this.getdata();
            
        //   //解决开关bug
        //   this.value.push(false);
      },
      computed:{
          //计算属性会依赖的属性value变化而变化
        totalcount(){
            //总数量就是value数组中值为true的
           
            var newArr=this.value.filter(item=>{return item;});
                //计算总价格,必须定义一个局部变量，通过这个局部变量去给totalAmount赋值，否则一直是累加的操作
            var pricecount=0;
            this.value.forEach((item,index)=>{
                if(item){
                    //获取对应索引的数量和价格
                    var count=this.list[index].cou;
                    var price=this.list[index].sell_price;
                    console.log(count);
                    pricecount+=count*price;
                     console.log(pricecount);
                }
            });
           
            this.totalAmount=pricecount;
            return newArr.length;
            
        }
      },
        methods:{
            delData(index,goodsid){
               //1.0移除value位置的值
               this.value.splice(index,1);
               //2.0移除list对应index的数据
               this.list.splice(index,1);
               //3.0 移除localstorage的值
               delItem(goodsid);

            },
            getobj(resobj){
                //数量发生改变时更新数据
                updateObj(resobj);
                
                for(var i=0;i<this.list.length;i++){
                    //list[i]的结构是{
                                    // "cou": 1,
                                    // "id": 88,
                                    // "title": "苹果Apple iPhone 6 Plus 16G 4G手机（联通三网版）",
                                    // "sell_price": 5780,
                                    // "thumb_path": "http://182.254.146.100:8080/upload/201504/20/thumb_201504200059017695.jpg"
                                    // }
                  if(this.list[i].id==resobj.goodsid){
                      if(resobj.type=='add'){
                        this.list[i].cou++;
                  }else if(resobj.type=='substrict'){
                        this.list[i].cou--;
                  }
                  break;
              }
          }

            },
            getdata(){
               var obj=getGoodsObj();
               console.log(obj);
               var idstr='';
               for(var key in obj){
                   idstr+=key+",";
                   
                 
               }
               idstr=idstr.substring(0,idstr.length-1);
               console.log(idstr);
               var url=common.apidomain+'/api/goods/getshopcarlist/'+idstr;
               console.log(url);
               this.$http.get(url).then(function(res){
                   if(res.body.status!=0){
                        Toast(res.body.message);
                        return;
                    }
                    var that=this;
                    //或者使用箭头函数，箭头函数中没有this  (item=>{item.cou=obj[item.id];})
                    res.body.message.forEach(function(item){
                        item.cou=obj[item.id];
                        //解决开关bug
                        that.value.push(false);
                    });
                   
                    this.list=res.body.message;
               })



            }

        }
    }
</script>
<style scoped>
    .row {
        height: 100px;
        display:flex;
        border-bottom:1px solid rgba(0,0,0,.3);
        padding-left:2px;

    }
    .row .swithbtn{
        flex:0 0 60;
    }
    .row img{
        width: 75px;
        height: 75px;
        flex:0 0 75;
        margin-left:5px;
        margin-top:8px;
    }
    .row .btn{
        flex:1;
        margin-left:5px;
    }
    .row .btn h4{
        color:#0094ff;
    }
    .row .btn ul{
        padding-left:0;
    }
    .row .btn li{
        list-style:none;
        display: inline-block;
    }
    .row .btn ul li:first-of-type{
        color:red;
    }

    .total{
        height: 100px;
        background-color: rgba(0,0,0,.1);
        display:flex;
        padding:5px;
    }
    .total .desc{
        flex:1;
    }
    .total ul{
        padding-left:0;
        
    }
    .total li{
        list-style: none;
        line-height: 30px;
    }
    
    .total  .btn{
        flex:0 0 60;
        margin-top:30px;
        margin-right:20px;
    }
</style>